<template>
	<view class="new">
		<view class="new_top">
			<view class="new_top_input">
				<view class="new_top_input_ipt">
					<text class="text">收件人</text>
					<input class="itp" v-model="name" type="text" placeholder="请填写收件人姓名">
				</view>
				<view class="new_top_input_ipt">
					<text class="text">联系电话</text>
					<input class="itp" v-model="phones" type="text" placeholder="请填写您的联系电话">
				</view>

				<view class="new_top_input_ipt_c">
					<text class="text">收货地址</text>
					<input class="itp"  type="text" v-model="site" @click="inputsite" placeholder="请填写您的地址" disabled='true'/>
					<!-- <text class="text2">定位</text> -->
				</view>
				<view class="new_top_input_ipt_a">
					<text class="text">详细地址</text>
					<input class="itp" type="text" v-model="detailedaddress" placeholder="填写详细地址，例：6号楼203室">
				</view>
			</view>

			<view class="new_moren">
				<view class="new_moren_left">
					<text class="text1">设为默认地址</text>
					<text class="text2">提示：同城服务默认推荐使用该地址</text>
				</view>
				<switch class="switch" :checked="checked" color="#FFCC33" @change="switch1Change" />
			</view>
			<view class="new_bottom_tianjia" @click="address">
				添加
			</view>
		</view>

		<u-popup :show="show" position="bottom" custom-style="height: 40%;" @close="onClose">
		
			<view class="box" style="display: flex;justify-content: space-between;padding: 20rpx 50rpx;">
				<text @click="cancel">取消</text>
				<text @click="ascertain">确定</text>
			</view>
			<picker-view indicator-style="height:88rpx;" style="height:440rpx" :value="value" @change="bindChange"
				class="citybody">
				<picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
					<view v-for="(item,index) in provinces" :key='index'>{{item}}</view>
				</picker-view-column>
				<picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
					<view v-for="(item,index) in citys" :key='index'>{{item}}</view>
				</picker-view-column>
				<picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
					<view v-for="(item,index) in areas" :key='index'>{{item}}</view>
				</picker-view-column>
			</picker-view>
		
		</u-popup>

	</view>
</template>

<script>
	import homeServices from '../../service/homeService'



	export default {
		data() {
			return {
				show: false,
				province: '',
				city: '',
				district: '',
				list: [],

				name: '',
				phones: '',
				site: '',
				detailedaddress: '',
				name1: '北京市',
				name2: '北京市',
				name3: '东城区',
				checked: false,
				provinces: [], //省所有
				citys: [], //市所有
				areas: [], //区所有
				province: "", //当前省份
				city: "", //当前市
				area: "", //当前区
				value: [0, 0, 0],
				values: [0, 0, 0],
				lists: [],
				ids: 2,
				typeid:''
			}
		},
		onLoad(option) {
			this.typeid = option.id
			// console.log(areaList)
		},
		methods: {

			bindChange(e) {
				console.log(e)
				// const val = e.detail.value
				var val = e.detail.value //当前选中的下标
				// console.log(val)
				var t = this.values; //旧选中下标
				this.lists = []
				this.list.forEach((it, i) => {
					if (i == val[0]) {
						this.lists.push(it.n)
						this.name1 = it.n
						it.c.forEach((t, is) => {
							if (is == val[1]) {
								this.lists.push(t.n)
								this.name2 = t.n
								t.c.forEach((tt, ii) => {
									if (ii == val[2]) {
										this.lists.push(tt.n)
										this.name3 = tt.n
										this.ids = tt.pid
										// console.log(this.ids)
									}
								})
							}

						})
					}


				})
				// console.log(this.lists)
				if (val[0] != t[0]) { //如果选择的省份变了
					this.citys = [] //清空市区
					this.areas = []
					this.list[val[0]].c.forEach(item => { //获取新选择省份的所有市
						this.citys.push(item.n)
					})
					this.list[val[0]].c[0].c.forEach(item => { //获取新选择省份的第一个市的所有区
						this.areas.push(item.n)
					})
					this.province = this.provinces[val[0]], //省
						this.city = this.list[val[0]].c[0].n, //市
						this.area = this.list[val[0]].c[0].c[0].n, //区
						this.values = val,
						this.value = [val[0], 0, 0]
					return;
				}
				if (val[1] != t[1]) { //如果选择的市变了
					this.areas = []; //清空区
					this.list[val[0]].c[val[1]].c.forEach(item => {
						this.areas.push(item.n)
					})
					this.city = this.citys[val[1]] //市
					this.area = this.list[val[0]].c[val[1]].c[0].n //区
					this.values = val,
						this.value = [val[0], val[1], 0]
					return;
				}
				if (val[2] != t[2]) {
					this.area = this.areas[val[2]] //区
					this.values = val
					return;
				}




			},

			ascertain() {
				this.site = this.name1 + '' + this.name2 + '' + this.name3;
				this.show = false
				console.log(this.site)
			},
			async address() {
				if (!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phones))) {
					uni.showToast({
						title: '请输入正确的手机格式',
						icon: 'none'
					});
					return false;
				}
				let params = {
					address: {
						province: this.name1,
						city: this.name2,
						district: this.name3,
						city_id: this.ids
					},
					detail: this.detailedaddress,
					is_default: this.checked,
					phone: this.phones,
					real_name: this.name,
				}
				let res = await homeServices.address(params)
				
				// if(this.typeid == 1){
					
				// }else{
				// 	uni.redirectTo({
				// 		url: '/pagesB/shippingaddress/shippingaddress'
				// 	})
				// }
				uni.navigateBack()
				
				// console.log(res)
			},
			switch1Change(e) {
				console.log(e)
				this.checked = e.detail.value

			},
			onClose() {
				this.show = false
			},

			confirms() {
				this.show = false
			},
			cancel() {
				this.show = false
			},
			async inputsite() {
				this.show = true
				this.provinces = []
				this.citys = []
				this.areas = []
				let params = {}
				let res = await homeServices.inputsite(params)
				this.list = res.data
				this.list.forEach(item => {
					this.provinces.push(item.n) //第一列省份所有名称
					// console.log(this.provinces)
				})
				this.list[0].c.forEach(item => {
					this.citys.push(item.n) //第一个省的市所有名称
				})
				this.list[0].c[0].c.forEach(item => {
					this.areas.push(item.n) //第一个省份的第一个市的所有区
				})
				this.province = this.list[0].n //省
				this.city = this.list[0].c[0].n //市
				this.area = this.list[0].c[0].c[0].n //区
				console.log(this.list)
				this.site=this.province + '' + this.city + '' + this.area;
			},


		},

	}
</script>

<style lang="scss" scoped>
	@import '@/static/sass/new.scss';
</style>
